<template>
  <view class="page-container">
    <!-- 已审批列表 -->
    <view v-for="(leave, idx) in approvedList" :key="idx" class="leave-card">
      <!-- 学生基础信息 -->
      <view class="student-info">
        <text class="name">{{ leave.studentName }}</text>
        <text class="class-id">{{ leave.studentClass }} | 学号：{{ leave.studentId }}</text>
      </view>

      <!-- 请假核心信息 -->
      <view class="leave-info">
        <view class="info-item">
          <text class="label">请假类型：</text>
          <text class="value">{{ leave.leaveType }}</text>
        </view>
        <view class="info-item">
          <text class="label">请假时间：</text>
          <text class="value">{{ leave.startDate }} 至 {{ leave.endDate }}</text>
        </view>
        <view class="info-item">
          <text class="label">申请时间：</text>
          <text class="value">{{ leave.applyTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">审批时间：</text>
          <text class="value">{{ leave.approveTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">请假事由：</text>
          <text class="value">{{ leave.reason }}</text>
        </view>
        <!-- 审批意见（有则显示） -->
        <view class="info-item" v-if="leave.approveRemark">
          <text class="label">审批意见：</text>
          <text class="value">{{ leave.approveRemark }}</text>
        </view>
      </view>

      <!-- 审批状态标签（已同意/已拒绝） -->
      <view class="status-tag" :class="leave.approveStatus === 1 ? 'approved-tag' : 'rejected-tag'">
        {{ leave.approveStatus === 1 ? '已同意' : '已拒绝' }}
      </view>
    </view>

    <!-- 空状态（无已审批记录） -->
    <view v-if="approvedList.length === 0" class="empty-box">
      <image src="/static/empty.png" mode="widthFix" class="empty-icon"></image>
      <text class="empty-text">暂无已审批的请假记录</text>
    </view>
  </view>
</template>

<script>
import { getApprovedList } from '@/common/util.js';

export default {
  data() {
    return {
      approvedList: [] // 已审批列表数据
    };
  },
  onLoad() {
    this.loadApprovedList(); // 页面加载时获取已审批数据
  },
  onPullDownRefresh() {
    // 下拉刷新列表
    this.loadApprovedList(() => {
      uni.stopPullDownRefresh(); // 刷新完成停止动画
    });
  },
  methods: {
    // 从本地缓存加载已审批列表
    loadApprovedList(callback) {
      this.approvedList = getApprovedList();
      callback && callback(); // 执行回调（停止下拉刷新）
    }
  }
};
</script>

<style scoped>
/* 页面容器基础样式 */
.page-container {
  background-color: #F5F5F5;
  min-height: 100vh;
  padding: 15rpx;
}

/* 已审批卡片样式 */
.leave-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 学生信息行样式 */
.student-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}
.class-id {
  font-size: 24rpx;
  color: #666666;
  text-align: right;
}

/* 请假信息列表样式 */
.leave-info {
  margin-bottom: 20rpx;
}
.info-item {
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 12rpx;
  line-height: 36rpx;
}
.label {
  color: #999999;
  margin-right: 8rpx;
}
.value {
  word-break: break-all;
}

/* 审批状态标签样式 */
.status-tag {
  display: inline-block;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}
/* 已同意标签 */
.approved-tag {
  background-color: #E8F5E9;
  color: #4CAF50;
}
/* 已拒绝标签 */
.rejected-tag {
  background-color: #FFEBEE;
  color: #F44336;
}

/* 空状态样式 */
.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}
.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>